<template>
<div>
  <p class="title">{{$t('USERINFO.MYINFO')}}</p>
   <div class="account_details">
    <el-form :rules="rules" :model="form" ref="form" :hide-required-asterisk="true">
      <div  class="account_details_form_item">
        <el-form-item prop="nickname" :label="$t('USERINFO.USERNAME')"  >
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
         <el-form-item prop="country" :label="$t('USERINFO.COUNTRY')" >
          <el-input v-model="form.country"></el-input>
        </el-form-item>
      </div>
      <div class="account_details_form_item">
        <el-form-item prop="truename" :label="$t('USERINFO.FULLNAME')">
          <el-input v-model="form.truename"></el-input>
        </el-form-item>
         <el-form-item prop="email" :label="$t('USERINFO.EMAIL')">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </div>
      <div class="account_details_form_item">
        <el-form-item prop="password" :label="$t('USERINFO.PASSWORD')">
          <el-input v-model="form.password" :type="showPsw">
            <i @click="isPswShow" slot="suffix" :class="showPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>

          </el-input>
        </el-form-item>
         <el-form-item >
          <!-- <el-input></el-input> -->
        </el-form-item>
      </div>
    </el-form>
    <div class="account_details_button">
        <el-button :loading="isRequest" @click="submit">{{$t('USERINFO.SAVE')}}</el-button>
    </div>
   
  </div>
</div>
 
</template>

<script>
import { personalInfo, personalInfoEdit } from '@/api/common/personal.js'
import { mapGetters } from 'vuex'

export default {
  data() {
    return{
      isRequest: false,
      showPsw: 'password',
      form: {
        country: '',
        nickname: '',
        truename: '',
        email: '',
        password: '',
        site: ''
      },
      rules:{
        nickname:[
          { required: true,  trigger: 'change' },
        ],
        country:[
          { required: true,  trigger: 'change' },
        ],
        truename:[
          { required: true,  trigger: 'change' },
        ],
        email:[
          { required: true,  trigger: 'change' },
        ],
        password: [
          { min: 6, max: 12, message: this.$t('DEFAULT.MSGPWSLEN'), trigger: 'blur' }
        ],

      }
    }

  },
  computed: {
    ...mapGetters([ 'userInfo', 'curSite']),
  },
  watch :{
    userInfo () {
      if(this.userInfo.email){
        this.getUserInfo()
      }
    }
  },
  mounted () {
    if(this.userInfo.email){
      this.getUserInfo()
    }
   
  },
  methods: {
    isPswShow () {
      if(this.showPsw == 'password'){
        this.showPsw = 'text'
      } else {
        this.showPsw = 'password'
      }
    },
    getUserInfo(){
      let params = {
        email: this.userInfo.email
      }
      personalInfo(params).then(res=>{
        this.form = res.data
      })
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.editInfo()
        } else {
          return false;
        }
      })
    },
    editInfo () {
      this.isRequest = true
      let params = this.form
      params.site = this.curSite.site
      personalInfoEdit(params).then(res=>{
        if(res.state == 1){
          let send_email  = res.data.send_email
          if(send_email == 0){
            this.$message.success(this.$t('USERINFO.INFOMODIFY'))
          } else  if(send_email == 1){
            this.$router.push({path: '/register_email'})
          }
        
        }
        this.isRequest = false
        this.$store.dispatch("GetUserInfo")
      })
    }
  }

}
</script>

<style lang="scss">
.account_details .el-form .el-input__suffix{
  right: 15px;
  cursor: pointer;
  .iconfont{
    color: #666666;
    &:hover{
      color: #303030;
    
    }
  }

}
</style>